import styled from 'styled-components'
import img from '@img/all.png'
import vmpImg from '@img/vmp.png'

export const StyledChoose = styled.div<{ disabled?: boolean; width: number }>`
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	.slider-bar {
		height: 38px;
		display: flex;
		justify-content: center;
		align-items: center;
		.slider-operate {
			display: inline-block;
			height: 30px;
			width: 30px;
			background-image: url(${img});
			cursor: pointer;
			&.slider-operate-right {
				background-position: 0 -395px;
				margin-left: 3px;
				&:hover {
					background-position: -30px -395px;
				}
				&.disabled {
					background-position: -90px -395px;
					cursor: not-allowed;
				}
			}
			&.slider-operate-left {
				background-position: -120px -395px;
				margin-right: 3px;
				&:hover {
					background-position: -150px -395px;
				}
				&.disabled {
					background-position: -210px -395px;
					cursor: not-allowed;
				}
			}
		}
		.slider-view {
			width: ${(props) => props.width + 'px'};
			height: 38px;
			overflow: hidden;
			ul {
				width: 4000px;
			}
		}
	}
	.style-box {
		width: 64px;
		height: 38px;
		margin: 0 3px;
		float: left;
		cursor: ${(props) => (props.disabled ? '' : 'pointer')};
		background-image: url(${vmpImg});
		&.single-box {
			position: relative;
			left: 50%;
			transform: translateX(-50%);
		}
		&.one {
			background-position: -256px 0;
			&.select {
				background-position: -320px 0;
			}
		}
		&.two_a {
			background-position: -512px 0;
			&.select {
				background-position: -576px 0;
			}
		}
		&.two_b {
			background-position: -768px 0;
			&.select {
				background-position: -832px 0;
			}
		}
		&.two_c {
			background-position: 0 -1862px;
			&.select {
				background-position: -64px -1862px;
			}
		}
		&.two_d {
			background-position: -256px -1862px;
			&.select {
				background-position: -320px -1862px;
			}
		}
		&.two_e {
			background-position: -512px -1862px;
			&.select {
				background-position: -576px -1862px;
			}
		}
		&.three_a {
			background-position: 0 -38px;
			&.select {
				background-position: -64px -38px;
			}
		}
		&.three_b {
			background-position: -256px -38px;
			&.select {
				background-position: -320px -38px;
			}
		}
		&.three_c {
			background-position: 0 -2178px;
			&.select {
				background-position: -64px -2178px;
			}
		}
		&.four_a {
			background-position: -512px -38px;
			&.select {
				background-position: -576px -38px;
			}
		}
		&.four_b {
			background-position: -256px -2178px;
			&.select {
				background-position: -320px -2178px;
			}
		}
		&.four_c {
			background-position: -768px -38px;
			&.select {
				background-position: -832px -38px;
			}
		}
		&.five_a {
			background-position: 0 -76px;
			&.select {
				background-position: -64px -76px;
			}
		}
		&.five_b {
			background-position: -256px -76px;
			&.select {
				background-position: -320px -76px;
			}
		}
		&.six_a {
			background-position: -512px -76px;
			&.select {
				background-position: -576px -76px;
			}
		}
		&.six_b {
			background-position: -768px -1862px;
			&.select {
				background-position: -832px -1862px;
			}
		}
		&.seven {
			background-position: 0 -114px;
			&.select {
				background-position: -64px -114px;
			}
		}
		&.eight {
			background-position: -512px -114px;
			&.select {
				background-position: -576px -114px;
			}
		}
		&.nine {
			background-position: 0 -152px;
			&.select {
				background-position: -64px -152px;
			}
		}
		&.ten {
			background-position: -256px -152px;
			&.select {
				background-position: -320px -152px;
			}
		}
		&.eleven_a {
			background-position: -768px -152px;
			&.select {
				background-position: -832px -152px;
			}
		}
		&.eleven_b {
			background-position: 0 -1900px;
			&.select {
				background-position: -128px -1900px;
			}
		}
		&.twelve_a {
			background-position: 0 -190px;
			&.select {
				background-position: -64px -190px;
			}
		}
		&.twelve_b {
			background-position: -256px -1900px;
			&.select {
				background-position: -320px -1900px;
			}
		}
		&.thirteen {
			background-position: -256px -190px;
			&.select {
				background-position: -320px -190px;
			}
		}
		&.fourteen {
			background-position: -768px -190px;
			&.select {
				background-position: -832px -190px;
			}
		}
		&.fifteen_a {
			background-position: 0 -228px;
			&.select {
				background-position: -64px -228px;
			}
		}
		&.fifteen_b {
			background-position: -512px -1900px;
			&.select {
				background-position: -576px -1900px;
			}
		}
		&.sixteen {
			background-position: -256px -228px;
			&.select {
				background-position: -320px -228px;
			}
		}
		&.seventeen {
			background-position: -512px -228px;
			&.select {
				background-position: -576px -228px;
			}
		}
		&.eighteen {
			background-position: -768px -228px;
			&.select {
				background-position: -832px -228px;
			}
		}
		&.nineteen {
			background-position: 0 -266px;
			&.select {
				background-position: -64px -266px;
			}
		}
		&.twenty {
			background-position: -256px -266px;
			&.select {
				background-position: -320px -266px;
			}
		}
		&.twenty_one {
			background-position: -512px -266px;
			&.select {
				background-position: -576px -266px;
			}
		}
		&.twenty_two {
			background-position: -768px -266px;
			&.select {
				background-position: -832px -266px;
			}
		}
		&.twenty_four {
			background-position: -256px -304px;
			&.select {
				background-position: -320px -304px;
			}
		}
		&.twenty_five {
			background-position: -512px -304px;
			&.select {
				background-position: -576px -304px;
			}
		}
	}
`
export const StyledModal = styled.div`
	.style-select {
		margin: 3px 0 18px 40px;
	}
	.modal-slider-bar {
		display: flex;
		justify-content: center;
		align-items: center;
		.modal-slider-operate {
			display: inline-block;
			height: 30px;
			width: 30px;
			background-image: url(${img});
			cursor: pointer;
			&.modal-slider-operate-right {
				background-position: 0 -395px;
				margin-left: 3px;
				&:hover {
					background-position: -30px -395px;
				}
			}
			&.modal-slider-operate-left {
				background-position: -120px -395px;
				margin-right: 3px;
				&:hover {
					background-position: -150px -395px;
				}
			}
		}
		.modal-slider-view {
			width: 626px;
			height: 260px;
			overflow: hidden;
			ul {
				display: flex;
				flex-wrap: wrap;
				width: 626px;
				.modal-style-box {
					float: left;
					height: 82px;
					width: 121px;
					margin: 2px;
					cursor: pointer;
					border: 1px solid #fff;
					box-sizing: border-box;
					background-image: url(${vmpImg});
					&.select {
						border: 1px solid #3a94d3;
					}
					&.one {
						background-position: -476px -342px;
					}
					&.two_a {
						background-position: 0 -422px;
					}
					&.two_b {
						background-position: -476px -422px;
					}
					&.two_c {
						background-position: -476px -1702px;
					}
					&.two_d {
						background-position: 0 -1782px;
					}
					&.two_e {
						background-position: -476px -1782px;
					}
					&.three_a {
						background-position: -476px -502px;
					}
					&.three_b {
						background-position: 0 -502px;
					}
					&.three_c {
						background-position: 0 -2098px;
					}
					&.four_a {
						background-position: 0 -582px;
					}
					&.four_b {
						background-position: -476px -2098px;
					}
					&.four_c {
						background-position: -476px -582px;
					}
					&.five_a {
						background-position: 0 -662px;
					}
					&.five_b {
						background-position: -476px -662px;
					}
					&.six_a {
						background-position: 0 -742px;
					}
					&.six_b {
						background-position: 0 -1938px;
					}
					&.seven {
						background-position: 0 -822px;
					}
					&.eight {
						background-position: 0 -902px;
					}
					&.nine {
						background-position: 0 -982px;
					}
					&.ten {
						background-position: -476px -982px;
					}
					&.eleven_a {
						background-position: -476px -1062px;
					}
					&.eleven_b {
						background-position: -476px -1938px;
					}
					&.twelve_a {
						background-position: 0 -1142px;
					}
					&.twelve_b {
						background-position: 0 -2018px;
					}
					&.thirteen {
						background-position: -476px -1142px;
					}
					&.fourteen {
						background-position: -476px -1222px;
					}
					&.fifteen_a {
						background-position: 0 -1302px;
					}
					&.fifteen_b {
						background-position: -476px -2018px;
					}
					&.sixteen {
						background-position: -476px -1302px;
					}
					&.seventeen {
						background-position: 0 -1382px;
					}
					&.eighteen {
						background-position: -476px -1382px;
					}
					&.nineteen {
						background-position: 0 -1462px;
					}
					&.twenty {
						background-position: -476px -1462px;
					}
					&.twenty_one {
						background-position: 0 -1542px;
					}
					&.twenty_two {
						background-position: -476px -1542px;
					}
					&.twenty_four {
						background-position: -476px -1622px;
					}
					&.twenty_five {
						background-position: 0 -1702px;
					}
				}
			}
		}
	}
`
